<template>
  <Layout class="p-5 bg-white">
    <Form :label-width="80">
      <FormItem class="w-50" label="账户名">
        <Input v-model="user.account" placeholder="请输入用户的账户"></Input>
      </FormItem>

      <FormItem class="w-50" label="密码">
        <Input v-model="user.password" placeholder="请输入密码"></Input> 
      </FormItem>

      <FormItem class="w-50" label="确认密码">
        <Input v-model="user.confirmPassword" placeholder="请确认密码"></Input>
      </FormItem>

      <FormItem class="w-50" label="昵称">
        <Input v-model="user.nickName" placeholder="请输入昵称"></Input>
      </FormItem>

      <FormItem class="w-50" label="性别">
        <RadioGroup v-model="user.sex">
          <Radio label="1">
            <span>男</span>
          </Radio>
          <Radio label="0">
            <span>女</span>
          </Radio>
        </RadioGroup>
      </FormItem>

      <FormItem class="w-50" label="手机号">
        <Input v-model="user.tel" placeholder="请输入用户的手机号"></Input>
      </FormItem>

      <FormItem class="w-50" label="身份证号">
        <Input v-model="user.secId" placeholder="请输入用户的身份证号"></Input>
      </FormItem>

      <FormItem class="w-50" label="头像">
        <Input v-model="user.headImg" placeholder="请输入头像"></Input>
      </FormItem>

      <FormItem class="w-50" label="用户表示">
        <Input v-model="user.openId" placeholder="请输入openId"></Input>
      </FormItem>

      <FormItem class="" label="角色">
        <CheckboxGroup v-model="user.roleIds">
          <Checkbox v-for="(item, index) in roles" :label="item.roleId">{{
            item.roleName
          }}</Checkbox>
        </CheckboxGroup>
      </FormItem>

      <FormItem class="text-right">
        <Button @click="submit" type="primary">提交</Button>
        <Button @click="cancel" class="ml-2">取消</Button>
      </FormItem>
    </Form>
	<Loadding v-bind:loadinghuan="isSpinShow"></Loadding>
  </Layout>
</template>

<script>
export default {
  data() {
    return {
	  isSpinShow: false,
      allPermissions: [],
      user: {
        account: '',
        password: '',
        nickName: '',
        sex: '',
        tel: '',
        secId: '',
        headImg: '',
        openId: '',
        confirmPassword: '',
        roleIds: [],
      },
      roles: [],
    }
  },
  created: function() {
    this.getAllRole()
  },
  methods: {
    getAllRole: function() {
      //获取全部的角色
      this.http
        .get({
          url: '/role/list',
          param: {},
        })
        .then((data) => {
          this.$data.roles = data
        })
    },
    submit: function() {
      //提交更新用户信息和其角色
      if (this.$data.user.account === '') {
        this.message.error('账户名必须输入')
        return
      }
      if (this.$data.user.password === '') {
        this.message.error('密码必须输入')
        return
      }

      if (this.$data.user.password !== this.$data.user.confirmPassword) {
        this.message.error('确认密码必须一致')
        return
      }

      // if (this.$data.user.tel === '') {
      //   this.message.error('手机号必须输入')
      //   return
      // }

      // if (this.$data.user.secId === '') {
      //   this.message.error('身份证必须输入')
      //   return
      // }

      if (this.$data.user.openId === '') {
        this.message.error('openId必须输入')
        return
      }

      if (this.$data.user.roleIds.length === 0) {
        this.message.error('角色必须选择')
        return
      }
      let self = this

      let roles = []
      roles.push(this.$data.user.role + '')
      this.$data.user.roles = JSON.stringify(roles)
      delete this.$data.user.role

      //将List<Integer> 转化成以逗号分隔的字符串 [1,2,3,4]  ---> 1,2,3,4
      var s1 = ''
      for (let item in this.user.roleIds) {
        var s1 = s1.concat(this.user.roleIds[item] + ',')
      }

      let currentUser = JSON.parse(sessionStorage.getItem('CURRENT_USER'))
      var submitPOJO = {
        'user.account': this.user.account,
        'user.password': this.user.password,
        'user.nickName': this.user.nickName,
        'user.sex': this.user.sex,
        'user.tel': this.user.tel,
        'user.secId': this.user.secId,
        'user.headImg': this.user.headImg,
        'user.openId': this.user.openId,
        roleIds: s1.substr(0, s1.length - 1),
        'user.cu': currentUser.user.userId,
      }
      this.isSpinShow = true
      this.http
        .post({
          url: '/user',
          param: submitPOJO,
        })
        .then((data) => {
	      this.isSpinShow = false
          self.message.info('新增成功')
          this.$tabs.close()
        })
    },
    cancel: function() {
      this.$tabs.close()
    },
  },
  destroyed: function() {
    this.$router.push({
      name: 'user',
    })
  }
}
</script>

<style></style>
